---
title: Search
description: Implement document search in your docs
---

## Search UI

You can customise the search UI from root provider, such as disabling search:

```tsx title="app/layout.tsx"
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html>
      <body>
        <RootProvider
          search={{
            enabled: false, // [!code ++]
          }}
        >
          {children}
        </RootProvider>
      </body>
    </html>
  );
}
```

### Hot Keys

Customise the hot keys to trigger search dialog, by default it's <kbd>⌘</kbd> <kbd>K</kbd> or <kbd>Ctrl</kbd> <kbd>K</kbd>.

```tsx
import { RootProvider } from 'fumadocs-ui/provider';

<RootProvider
  search={{
    hotKey: [
      {
        display: 'K',
        key: 'k', // key code, or a function determining whether the key is pressed
      },
    ],
  }}
>
  {children}
</RootProvider>;
```

### Replace Search Dialog

Make a `<RootProvider />` wrapper with `use client` directive, and use it instead of your previous root provider.

```tsx tab="provider.tsx"
'use client';
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

// for example, using the default `fetch()` client
import SearchDialog from 'fumadocs-ui/components/dialog/search-default';

export function Provider({ children }: { children: ReactNode }) {
  return (
    <RootProvider
      search={{
        SearchDialog,
      }}
    >
      {children}
    </RootProvider>
  );
}
```

```tsx tab="app/layout.tsx"
import { Provider } from './provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}
```

## Search Server

The search server/backend is provided and documented on Fumadocs Core, see [available engines](/docs/headless/search).

## Search Client

You can choose a search client according to your search engine, it defaults to `fetch` client.

### `fetch`

It sends queries to an API endpoint, works with the built-in [Orama search engine](/docs/headless/search/orama).

You can pass options to the search client:

```tsx
import { RootProvider } from 'fumadocs-ui/provider';

<RootProvider
  search={{
    options: {
      // customise the API endpoint
      api: '/api/search/docs',
    },
  }}
>
  {children}
</RootProvider>;
```

#### Tag Filter

Add UI for filtering results by tags, [configure Tag Filter](/docs/headless/search/orama#tag-filter) on search server and add the following:

```tsx
import { RootProvider } from 'fumadocs-ui/provider';

<RootProvider
  search={{
    options: {
      defaultTag: 'value',
      tags: [
        {
          name: 'Tag Name',
          value: 'value',
        },
      ],
    },
  }}
>
  {children}
</RootProvider>;
```

### Algolia

For the setup guide, see [Integrate Algolia Search](/docs/headless/search/algolia).

While generally we recommend building your own search with their client-side
SDK, you can also plug the built-in dialog interface.

<include meta='title="components/search.tsx"'>./search-algolia.tsx</include>

1. Replace `appId`, `apiKey` and `indexName` with your desired values.

2. [Replace the default search dialog](#replace-search-dialog) with your new component.

<Callout title="Note" className='mt-4'>

    The built-in implementation doesn't use instant search (their official
    javascript client).

</Callout>

#### Tag Filter

Same as default search client, you can configure [Tag Filter](/docs/headless/search/algolia#tag-filter) on the dialog.

```tsx title="components/search.tsx"
import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';

<SearchDialog
  defaultTag="value"
  tags={[
    {
      name: 'Tag Name',
      value: 'value',
    },
  ]}
/>;
```

### Orama Cloud

For the setup guide, see [Integrate Orama Cloud](/docs/headless/search/orama-cloud).

```tsx title="components/search.tsx"
'use client';

import { OramaClient } from '@oramacloud/client';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-orama';

const client = new OramaClient({
  endpoint: 'endpoint',
  api_key: 'apiKey',
});

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog {...props} client={client} showOrama />;
}
```

1. Replace `endpoint`, `apiKey` with your desired values.
2. [Replace the default search dialog](#replace-search-dialog) with your new component.

### Community Integrations

A list of integrations maintained by community.

- [Trieve Search](/docs/headless/search/trieve)

## Built-in UI

If you want to use the built-in search dialog UI instead of building your own,
you may use the `SearchDialog` component.

```tsx
import {
  SearchDialog,
  type SharedProps,
} from 'fumadocs-ui/components/dialog/search';

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog {...props} />;
}
```

<Callout type="warn" title="Unstable">
  It is an internal API, might break during iterations
</Callout>
